<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>忘记密码页面</title>
    <style>
        * { margin: 0; padding: 0; }
        html { height: 100%; }
        body { height: 100%; background: #fff url(images/backgroud.png) 50% 50% no-repeat; background-size: cover;}
        .dowebok { position: absolute; left: 50%; top: 50%; width: 430px; height: auto; margin: -300px 0 0 -215px; border: 1px solid #fff; border-radius: 20px; overflow: hidden;}
        .logo { width: 104px; height: 104px; margin: 50px auto 80px; background: url(images/login.png) 0 0 no-repeat; }
        .form-item { position: relative; width: 360px; margin: 0 auto; padding-bottom: 30px;}
        .form-item input { width: 288px; height: 48px; padding-left: 70px; border: 1px solid #fff; border-radius: 25px; font-size: 18px; color: #fff; background-color: transparent; outline: none;}
        .form-item button { width: 360px; height: 50px; border: 0; border-radius: 25px; font-size: 18px; color: #1f6f4a; outline: none; cursor: pointer; background-color: #fff; }
        #username { background: url(images/emil.png) 20px 14px no-repeat; }
        #password { background: url(images/password.png) 23px 11px no-repeat; }
        #names 	  { background:url(images/names1.png) 23px 11px no-repeat;background-size:8%; }
        #yanzheng {background: url(images/验证码.png) 20px 14px no-repeat;background-position-y:8px;}
        .tip { display: none; position: absolute; left: 20px; top: 52px; font-size: 14px; color: #f50; }
        .reg-bar { width: 360px; margin: 20px auto 0; font-size: 14px; overflow: hidden;}
        .reg-bar a { color: #fff; text-decoration: none; }
        .reg-bar a:hover { text-decoration: underline; }
        .reg-bar .reg { float: left; }
        .reg-bar .forget { float: right; }
        .dowebok ::-webkit-input-placeholder { font-size: 18px; line-height: 1.4; color: #fff;}
        .dowebok ::-moz-placeholder { font-size: 18px; line-height: 1.4; color: #fff;}
        .dowebok ::-moz-placeholder { font-size: 18px; line-height: 1.4; color: #fff;}
        .dowebok :-ms-input-placeholder { font-size: 18px; line-height: 1.4; color: #fff;}
		#yanzheng_box{display: none;}
		.back{text-decoration: none;margin-bottom: 10px;float: right;font-size: 18px;margin-right: 20px;
				line-height: 50px;height: 50px;background-image: url(images/back.png);background-repeat: no-repeat;
				width: 185px;text-align:right;background-position-y:7px;}
		.back a{text-decoration: none;color: white;}
		#newpwd_box{display: none;}
		
        @media screen and (max-width: 500px) {
            * { box-sizing: border-box; }
            .dowebok { position: static; width: auto; height: auto; margin: 0 30px; border: 0; border-radius: 0; }
            .logo { margin: 50px auto; }
            .form-item { width: auto; }
            .form-item input, .form-item button, .reg-bar { width: 100%; }
        }
    </style>
</head>
<body>
    <div class="dowebok">
    	<div style="text-align: center;line-height: 50px;
    		font-size: 32px;height: 50px;color: white;margin-top: 30px;">密码找回</div>
    	<form id="forget_form" style="margin-top: 20px;">
        <div class="form-item">
            <input id="username" type="text" name="email" autocomplete="off" placeholder="邮箱">
            <p class="tip" id="tip1">请输入合法的邮箱地址</p>
        </div>
        </form>
        <div class="form-item"><button id="submit">获取验证码</button></div>
        <div id="yanzheng_box">
        	<div class="form-item">
            <input id="yanzheng" type="text" name="names" autocomplete="off" placeholder="验证码">
            <p class="tip" id="tip2">验证码只能是六位数字</p>
          
        </div>
        <div class="form-item"><button id="yes">提交</button></div>
        </div>
        <div id="newpwd_box">
        <div class="form-item">
        <form id="newpwd_form">
            <input id="newpwd" type="password" name="newpwd" autocomplete="off" placeholder="新密码">
            <p class="tip" id="tip3">新密码格式不对</p>
              </form>
        </div>
        <div class="form-item"><button id="right">重置密码</button></div>
        </div>
        <div class="back" ><a href="login.html">点此返回登录页面</a></div>
        
    </div>
    <script src="js/jquery-3.3.1.js"></script>
   	<script type="text/javascript" src="layer/layer.js"></script>
    <script>
    	var obj=null;
        $(function(){//验证邮箱格式是否正确的正则
        	$("#username").blur(function(){
				var email_t=/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        		if(!email_t.test($("#username").val())){
        			$("#tip1").show();
        			return false;
			}else{
				$("#tip1").css("display","none");
				return true;
			}});
            $('#submit').on('click', function () {
            	//获取验证码的按钮点击后的触发事件
            	var email_t=/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        		if(!email_t.test($("#username").val())){
        			//点击按钮时的再次正则验证
        			$("#tip1").show();
        			return false;
				}else{
					$("#tip1").css("display","none");
				}
        	 $("#submit").attr("disabled", true); 
       		 $("#submit").html("60秒后重新获取邮箱验证码");
       		  var timeSec = 59;
       		  var timeStr = '';
       		  var codeTime = setInterval(function Internal(){
       		    if (timeSec == 0){
       		      $("#submit").html("获取邮箱注册码");
       		      $("#submit").removeAttr("disabled","disabled");
       		      clearInterval(codeTime);
       		      return;
       		    }
       		    timeStr = "("+timeSec+")获取邮箱注册码";
       		    $("#submit").html(timeStr);
       		    timeSec--;
       		  },1000);
        		
        		var index = layer.load(1, {
        			  shade: [0.1,'#fff'] //0.1透明度的白色背景
        			});
        		//发送验证码过程中的loading
        		$.ajax({
        			url:'forget',
        			type:'post',
        			data:$("#forget_form").serialize(),
        			async:'true',
        			dataType:'json',
        			contentType:'application/x-www-form-urlencoded; charset=UTF-8',
        			success:function(data){
        			obj=data;
        				layer.closeAll('loading');
        				if(obj.code=="0000"){
        					layer.msg("找回密码验证信息发送成功");
        				}else if (obj.code=="0003") {
							layer.msg("邮箱不存在");
						}
    					$("#yanzheng_box").show();
      				error:(function(){alert("失败");})
       				}});//第一个成功的回调函数 括号	
            })//第一个ajax的括号
        });//submit的括号
        
        $("#yes").click(function(){
    						//提交按钮触发以下事件
    						var yanzhengma=/^\d{6}$/;
    	        			if(!yanzhengma.test($("#yanzheng").val())){
    	        					$("#tip2").show();
    	        					return false;
    	        				}
    	        			if ($("#yanzheng").val()==obj.value) {
    							//验证码正确新密码框显示
    							layer.msg("验证码正确");
    							$("#newpwd_box").show();
    							}else{
    								layer.msg("验证码错误");
    							}
        					});
				        $("#right").click(function() {
				        	var pwd=/^[A-Za-z]+[0-9]+[A-Za-z0-9]*|[0-9]+[A-Za-z]+[A-Za-z0-9]*$/;
				        	if(!pwd.test($("#newpwd").val())){
				        	    //点击重置密码按钮时的再次正则验证
        	        			$("#tip3").show();
        	        			return false;
				        	}
        	        			var emailadd=$("#username").val();
        						var newpwd=$("#newpwd").val();
        					$.ajax({
        	        			url:'forgetto',
        	        			type:'post',
        	        			data:{"email":emailadd,"newpwd":newpwd},
        	        			async:'true',
        	        			dataType:'json',
        	        			contentType:'application/x-www-form-urlencoded; charset=UTF-8',
        	        			success:function(data){
        	        				var backcode=data;
        	        				if (backcode.code=="0000") {
										layer.msg("重置成功");
									}else if(backcode.code=="0002"){
										layer.msg("服务器异常,修改失败");
									}
        	        			},
        	        			error:function(){
        	        				alert("error");
        	        			}
                			});
        			})
    </script>
</body>
</html>